<div class="table-editor-container">
  <ul class="tab-nav">
    <li ng-class="{active: $ctrl.currentTab == 'columns'}" ng-if="$ctrl.options.globalSeriesType != 'custom'">
      <a ng-click="$ctrl.setCurrentTab('columns')">Columns</a>
    </li>
    <li ng-class="{active: $ctrl.currentTab == 'grid'}">
      <a ng-click="$ctrl.setCurrentTab('grid')">Grid</a>
    </li>
  </ul>

  <div ng-if="$ctrl.currentTab == 'grid'" class="m-t-10 m-b-10">
    <div class="form-group">
      <label>Items per page</label>
      <select ng-options="value for value in $ctrl.allowedItemsPerPage"
        ng-model="$ctrl.options.itemsPerPage" class="form-control">
      </select>
    </div>
  </div>

  <div ng-if="$ctrl.currentTab == 'columns'" class="table-editor-query-columns m-t-10 m-b-10"
    ui-sortable ng-model="$ctrl.options.columns">
    <div ng-repeat="column in $ctrl.options.columns">
      <div class="table-editor-column-header form-group">
        <div class="input-group">
          <span class="input-group-addon"><input type="checkbox" ng-model="column.visible"></span>
          <input class="form-control" ng-model="column.title" ng-model-options="{ allowInvalid: true, debounce: 200 }">
        </div>
      </div>
      <div class="form-group">
        <div class="btn-group btn-group-justified">
          <button type="button" class="btn btn-default btn-xs"
            ng-click="column.alignContent = 'left'"
            ng-class="{active: column.alignContent == 'left'}"><i class="fa fa-align-left"></i></button>
          <button type="button" class="btn btn-default btn-xs"
            ng-click="column.alignContent = 'center'"
            ng-class="{active: column.alignContent == 'center'}"><i class="fa fa-align-center"></i></button>
          <button type="button" class="btn btn-default btn-xs"
            ng-click="column.alignContent = 'right'"
            ng-class="{active: column.alignContent == 'right'}"><i class="fa fa-align-right"></i></button>
        </div>
      </div>

      <div class="form-group">
        <label class="ui-sortable-bypass"><input type="checkbox" ng-model="column.allowSearch"> Use for search</label>
      </div>

      <div class="form-group">
        <label>Display as:</label>
        <select ng-options="item.value as item.name for item in $ctrl.displayAsOptions"
          ng-model="column.displayAs" class="form-control">
        </select>
      </div>

      <div ng-if="column.displayAs == 'string'">
        <div class="form-group">
          <label class="ui-sortable-bypass"><input type="checkbox" ng-model="column.allowHTML"> Allow HTML content</label>
        </div>
        <div ng-if="column.allowHTML" class="form-group">
          <label class="ui-sortable-bypass"><input type="checkbox" ng-model="column.highlightLinks"> Highlight links</label>
        </div>
      </div>

      <div ng-if="column.displayAs == 'number'">
        <div class="form-group">
          <label for="table-editor-{{ column.name }}-number-format">
            Number format
            <span class="m-l-5"
              uib-popover-html="'Format <a href=&quot;https://redash.io/help/user-guide/visualizations/formatting-numbers&quot; target=&quot;_blank&quot;>specs.</a>'"
              popover-trigger="'click outsideClick'"><i class="fa fa-question-circle"></i></span>
          </label>
          <input class="form-control" ng-model="column.numberFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-number-format">
        </div>
      </div>

      <div ng-if="column.displayAs == 'datetime'">
        <div class="form-group">
          <label for="table-editor-{{ column.name }}-datetime-format">
            Date/Time format
            <span class="m-l-5"
              uib-popover-html="'Format <a href=&quot;https://momentjs.com/docs/#/displaying/format/&quot; target=&quot;_blank&quot;>specs.</a>'"
              popover-trigger="'click outsideClick'"><i class="fa fa-question-circle"></i></span>
          </label>
          <input class="form-control" ng-model="column.dateTimeFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-datetime-format">
        </div>
      </div>

      <div ng-if="column.displayAs == 'boolean'">
        <div class="form-group">
          <label for="table-editor-{{ column.name }}-boolean-false">Value for <code>false</code></label>
          <input class="form-control" ng-model="column.booleanValues[0]" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-boolean-false">
        </div>
        <div class="form-group">
          <label for="table-editor-{{ column.name }}-boolean-true">Value for <code>true</code></label>
          <input class="form-control" ng-model="column.booleanValues[1]" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-boolean-true">
        </div>
      </div>

      <div ng-if="column.displayAs == 'image'">
        <div class="form-group">
          <label for="table-editor-{{ column.name }}-image-url-template">URL template</label>
          <input class="form-control" ng-model="column.imageUrlTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-image-url-template">
        </div>

        <div class="form-group">
          <label>
            Size
            <span class="m-l-5"
              uib-popover-html="'Any positive integer value that specifies size in pixels. Leave empty to use default value.'"
              popover-trigger="'click outsideClick'" popover-placement="top-left"><i class="fa fa-question-circle"></i></span>
          </label>
          <div class="d-flex">
            <input class="form-control" ng-model="column.imageWidth" ng-model-options="{ allowInvalid: true, debounce: 200 }"
              placeholder="Width">
            <span class="form-control-static m-l-5 m-r-5">&times;</span>
            <input class="form-control" ng-model="column.imageHeight" ng-model-options="{ allowInvalid: true, debounce: 200 }"
              placeholder="Height">
          </div>
        </div>

        <div class="form-group">
          <label for="table-editor-{{ column.name }}-image-title-template">Title template</label>
          <input class="form-control" ng-model="column.imageTitleTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-image-title-template">
        </div>

        <div class="form-group">
          <label class="ui-sortable-bypass text-muted" style="font-weight: normal; cursor: pointer;"
            uib-popover-html="templateHint"
            popover-trigger="'click outsideClick'" popover-placement="top-left">
            Format specs <i class="fa fa-question-circle m-l-5"></i>
          </label>
        </div>
      </div>

      <div ng-if="column.displayAs == 'link'">
        <div class="form-group">
          <label for="table-editor-{{ column.name }}-link-url-template">URL template</label>
          <input class="form-control" ng-model="column.linkUrlTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-link-url-template">
        </div>

        <div class="form-group">
          <label for="table-editor-{{ column.name }}-link-text-template">Text template</label>
          <input class="form-control" ng-model="column.linkTextTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-link-text-template">
        </div>

        <div class="form-group">
          <label for="table-editor-{{ column.name }}-link-title-template">Title template</label>
          <input class="form-control" ng-model="column.linkTitleTemplate" ng-model-options="{ allowInvalid: true, debounce: 200 }"
            id="table-editor-{{ column.name }}-link-title-template">
        </div>

        <div class="form-group">
          <label class="ui-sortable-bypass"><input type="checkbox" ng-model="column.linkOpenInNewTab"> Open in new tab</label>
        </div>

        <div class="form-group">
          <label class="ui-sortable-bypass text-muted" style="font-weight: normal; cursor: pointer;"
            uib-popover-html="templateHint"
            popover-trigger="'click outsideClick'" popover-placement="top-left">
            Format specs <i class="fa fa-question-circle m-l-5"></i>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
